<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <title>案例-省市级联</title>
    <style type="text/css">
        .regist_bg {
            width: 100%;
            height: 600px;
            padding-top: 105px;
            background-image: url(0.jpg);
        }

        .regist {
            border: 7px inset #ccc;
            width: 600px;
            padding: 40px 0;
            padding-left: 80px;
            background-color: #fff;
            margin-left: 25%;
            border-radius: 10px;
        }

        input[type="submit"] {
            background-color: aliceblue;
            width: 100px;
            height: 35px;
            color: red;
            cursor: pointer;
            border-radius: 5px;
        }
    </style>

</head>

<body>
<div class="regist_bg">
    <div class="regist">
        <form action="#">
            <table width="600" height="350px">
                <tr>
                    <td colspan="3">
                        <font color="#3164af">会员注册</font> USER REGISTER
                    </td>
                </tr>
                <tr>
                    <td align="right">用户名</td>
                    <td colspan="2"><input id="loginnameId" type="text" name="loginname" size="60"/></td>
                </tr>
                <tr>
                    <td align="right">密码</td>
                    <td colspan="2"><input id="loginpwdId" type="password" name="loginpwd" size="60"/></td>
                </tr>
                <tr>
                    <td align="right">确认密码</td>
                    <td colspan="2"><input id="reloginpwdId" type="password" name="reloginpwd" size="60"/></td>
                </tr>
                <tr>
                    <td align="right">Email</td>
                    <td colspan="2"><input id="emailId" type="text" name="email" size="60"/></td>
                </tr>
                <tr>
                    <td align="right">姓名</td>
                    <td colspan="2"><input name="text" name="username" size="60"/></td>
                </tr>
                <tr>
                    <td align="right">性别</td>
                    <td colspan="2">
                        <input type="radio" name="gender" value="男" checked="checked"/>男
                        <input type="radio" name="gender" value="女"/>女
                    </td>
                </tr>
                <tr>
                    <td align="right">电话号码</td>
                    <td colspan="2"><input type="text" name="phone" size="60"/></td>
                </tr>
                <tr>
                    <td align="right">所在地</td>
                    <td colspan="3">
                        <select id="provinceId" style="width:150px">
                            <option value="">----请-选-择-省----</option>
                        </select>
                        <select id="cityId" style="width:150px">
                            <option value="">----请-选-择-市----</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td width="80" align="right">验证码</td>
                    <td width="100"><input type="text" name="verifyCode"/></td>
                    <td><img src="1.jpg" width="80" height="30"/></td>
                </tr>
                <tr>
                    <td></td>
                    <td colspan="2">
                        <input type="submit" value="注册"/>
                    </td>
                </tr>
            </table>
        </form>
    </div>
</div>
</body>
<script>
    /*
    * 省市联动 : 省的选项改变,市也会随之改变
    *	1. 准备省对应的市数据,建立省和市的联系
    *		二维数组: 每个元素都是一维数组的数组 (List<String> , List<List<String>>)
    *			索引0 -> fj , 1 -> js , 2 -> sh
    *	2. 事件
    *			onchange : 当内容改变时触发
    *
    *	3. 从二维数组中取出省对应的市数据
    *
    * 	4. 遍历市数据,循环追加到市下拉框中
    *
    * 	5. 注意: 在遍历追加之前,将市下拉框中的数据清空
    * */
    var fj = ["福州市", "泉州市", "三明市"];
    var js = ["南京市", "苏州市", "无锡市"];
    var sh = ["浦东新区", "航头区", "青浦区"];
    var cityDatas = [fj, js, sh];

    // <option value="0">福建省</option>
    //     <option value="1">江苏省</option>
    //     <option value="2">上海市</option>
    var sf = ["福建省", "江苏省", "上海市"];
    var province = document.getElementById("provinceId");
    for (let index in sf) {
        province.innerHTML += "<option value='"+index+"' >" + sf[index] + "</option>";
    }

    var elementById = document.getElementById("provinceId");
    elementById.onchange = function () {
        var cityDatum = cityDatas[elementById.value];
        // console.log(cityDatum)
        var citys = document.getElementById("cityId");
        citys.innerHTML = '<option value="">----请-选-择-市----</option>';
        for (let i = 0; i < cityDatum.length; i++) {
            citys.innerHTML += "<option value=''>" + cityDatum[i] + "</option>";
        }
        // for (let i of cityDatum) {
        //     citys.innerHTML += "<option value=''>"+i+"</option>";
        // }

    }


</script>

</html>
